
import { FC, useEffect, useRef, useState } from "react"
import * as echarts from 'echarts';
import { EChartsOption } from "echarts";
import { IDateCountLoadingStatus } from "../../../../../../../type/DataStatistics/api";

const TableFour: FC<{
    datalistFour?: IDateCountLoadingStatus[],
}> = ({
    datalistFour
}) => {
        const echartsBox = useRef<HTMLDivElement>(null);
        let echartsClass = useRef<echarts.ECharts>();
        const [countAll, setCountAll] = useState<number>(0);
        useEffect(() => {
            // 初始化echarts
            if (echartsBox && datalistFour) {
                var echarts_box_html = document.getElementById('echarts_box4')!;
                echartsClass.current = echarts.init(echarts_box_html);

                const count = datalistFour.reduce((pre, cur) => {
                    return pre + cur.carCount
                }, 0)
                setCountAll(count)
                const Xaxis = datalistFour.map((item) => {
                    return item.startHour
                })
                const Yaxis = datalistFour.map((item) => {
                    return item.carCount
                })
                var option: EChartsOption = {
                    grid: {
                        left: '4%',  // 左边距
                        right: '4%', // 右边距
                        bottom: '10%', // 下边距
                        top: '10%',    // 上边距
                        containLabel: true // 确保标签不被遮挡
                      },
                    xAxis: {
                        data: Xaxis,
                        boundaryGap: false,
                        type: 'category',
                    },
                    yAxis: {
                        type: 'value',
                        name: "车数"
                    },
                    series: [
                        {
                            data: Yaxis,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0, color: 'rgba(73,127,236,0.58)' // 起始颜色
                                        },
                                        {
                                            offset: 1, color: 'rgba(71,179,255,0.01)' // 中间颜色
                                        },
                                        {
                                            offset: 1, color: 'rgba(71,179,255,0.01)' // 结束颜色（透明）
                                        }
                                    ]
                                }
                            }
                        },
                    ],
                };
                option && echartsClass.current.setOption(option);
                echartsClass.current.resize();

            }
            return () => {
                echartsClass.current?.dispose();
            }
        }, [datalistFour])
        return (
            <>
                <div id="echarts_box4" style={{
                    width: '100%',
                    height: '31.5rem',
                    backgroundColor: '#fff',
                }} ref={echartsBox}></div>
                <div className="zhuangchebox">
                    <div className="countAll">
                        <span>{countAll}</span>
                        <span style={{ marginLeft: '5px', transform: 'translateY(7px)' }}>车</span>
                    </div>
                    <div className="titleName">装车总车数</div>
                </div>
            </>
        )
    }

export default TableFour;